<template>
  <el-aside width="isCollapse?60px:200px">
    <div @click="active" class="active">|||</div>
    <el-menu
      text-color="#FFFFFF"
      background-color="#001529"
      unique-opened
      :collapse="isCollapse"
    >
      <el-submenu v-for="(item) in menus" :key="item.id" :index="item.id" :disabled="item.disabled">
        <template slot="title">
          <i :class="item.icon"></i>
          <span class="a">{{ item.menuName }}</span>
        </template>
        <el-menu-item-group>
          <!-- //三级 -->
          <div v-for="item2 in item.children" :key="item2.id" >
            <el-submenu v-if="item2.children.length !== 0" :index='item2.id' :disabled="item2.disabled">
              <template>
                <template slot="title">
                  <i :class="item2.icon"></i>
                  <span class="b">{{ item2.menuName }}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                  :index="item3.id"
                    @click="linkto(item3.url)"
                    v-for="item3 in item2.children"
                    :key="item3.id"
                    :disabled="item3.disabled"
                  >
                    <i :class="item3.icon"></i>
                    <span>{{ item3.menuName }}</span>
                  </el-menu-item>
                </el-menu-item-group>
              </template>
            </el-submenu>
            <!-- 二级菜单 -->
            <el-menu-item v-else @click="linkto(item2.url)" :disabled="item2.disabled" :index="item2.id">
              <i :class="item2.icon"></i>
              <span>{{ item2.menuName }}</span>
            </el-menu-item>
          </div>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>
<script>
export default {
  data() {
    return {
      isCollapse: false,
      menus: [],
    };
  },
  created() {
    this.getmenusList();
  },
  methods: {
    //获取菜单泪飙
    getmenusList() {
      this.$http.get("/user/findMenu").then((res) => {
        console.log(res.data.data);
        this.menus = res.data.data;
      });
    },
    //折叠菜单
    active() {
      this.isCollapse = !this.isCollapse;
    },
    // 路由跳转
    linkto(url) {
      this.$router
        .replace({
          path: url,
        })
        .catch((eer) => {
          console.log("重复跳转相同地址");
        });
    },
  },
};
</script>

<style scoped>
.a {
  display: inline-block;
  margin-right: 80px;
}
.b {
  display: inline-block;
  margin-right: 50px;
}
.el-aside {
  background: #001529;
  color: #ffffff;
  text-align: center;
  height: 100%;
}
.active {
  height: 25px;
  line-height: 25px;
  font-size: 10px;
  text-align: center;
  background: #2d8cf0;
}
</style>